﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="workbench.aspx.cs" Inherits="frmMainNew" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>工作台</title>

    <link href="css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="ScriptFile/custom/uimaker/easyui.css">
    <link rel="stylesheet" href="css/workbench.css">
</head>
<body>
    <div class="container">
        <div id="hd">
        </div>
        <div id="bd">
            <div class="bd-content">
                <div class="right-zone">
                    <div class="inform item-box">
                        <div class="inform-hd">
                            <label>通知公告</label>
                            <a href="javascript:;">更多<span>&gt;</span></a>
                        </div>
                        <ul>
                            <%=strTzgg%>
                        </ul>
                    </div>
                    <div class="price item-box">
                        <div class="inform-hd">
                            <label>政策公示</label>
                            <a href="javascript:;">更多<span>&gt;</span></a>
                        </div>
                        <ul>
                            <%=strXwxx%>
                        </ul>
                    </div>
                    <div class="attached item-box">
                        <div class="inform-hd">
                            <label>下载中心</label>
                            <a href="javascript:;">更多<span>&gt;</span></a>
                        </div>
                        <%--<div class="attached-tab">
                            <a href="javascript:;" class="current item-left" attached="public-attached">公开附件</a>
                            <a href="javascript:;" class="item-right" attached="inner-attached">内部附件</a>
                        </div>--%>
                        <ul class="public-attached">
                            <%=strXzzx%>
                        </ul>
                    </div>
                </div>
                <div class="center-part">
                    <div class="center-items todo">
                        <div class="calendar-part">
                            <div class="easyui-calendar" style="width: 205px; height: 231px;"></div>
                        </div>
                        <ul class="work-items clearfix">
                            <li>
                                <div class="work-inner">
                                    <div class="work-item green">
                                        <i class="iconfont">&#xe61f;</i>
                                        <span class="num"><%=TiaoShu%>&nbsp;<span class="unit">个</span></span>
                                        <label>待办未处理</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item red">
                                        <i class="iconfont">&#xe622;</i>
                                        <span class="num">6&nbsp;<span class="unit">条</span></span>
                                        <label>已超期办件</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item yellow">
                                        <i class="iconfont">&#xe61d;</i>
                                        <span class="num">0&nbsp;<span class="unit">条</span></span>
                                        <label>即将过期件</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item gray">
                                        <i class="iconfont">&#xe620;</i>
                                        <span class="num">10&nbsp;<span class="unit">个</span></span>
                                        <label>挂起的办件</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item blue">
                                        <i class="iconfont">&#xe621;</i>
                                        <span title="2000,00万" class="num">2000,00&nbsp;<span class="unit"></span></span>
                                        <label>消息记录</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item purple">
                                        <i class="iconfont">&#xe61e;</i>
                                        <span title="2000,00万" class="num">100,00&nbsp;<span class="unit"></span></span>
                                        <label>文件列表</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="center-items chart0 clearfix">
                        <div class="chart0-item">
                            <div class="item-inner">
                                <div class="item-content">
                                    <div class="content-hd">业务办件量统计</div>
                                    <div class="chart-chart" id="chart0"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart0-item">
                            <div class="item-inner">
                                <div class="item-content">
                                    <div class="content-hd">业务办件量趋势图</div>
                                    <div class="chart-chart" id="chart1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-items chart1">
                        <div class="chart1-inner">
                            <div class="item-hd">各业务办件数</div>
                            <div class="chart1-chart" id="chart3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ft"></div>
    </div>
    <div class="todo-panel">
        <div class="todo-title">
            <i class="iconfont">&#xe61f;</i>
            <span class="num"><%=TiaoShu%>&nbsp;<span class="unit">个</span></span>
            <label>待办未处理</label>
        </div>
        <div class="todo-items">
            <ul>
                <li>
                    <span></span>
                    <a href="MyWindow/TaskInStepList.aspx?" class="ellipsis">您共有有<span><%=TiaoShu%>&nbsp;</span>案件申请未处理！<i></i></a>
                    <%=strDbMsg %> 
                </li>

            </ul>
        </div>
    </div>

    <script type="text/javascript" src="ScriptFile/jquery.js"></script>
    <script type="text/javascript" src="ScriptFile/custom/jquery.easyui.min.js"></script>
    <script src="ScriptFile/easyui-lang-zh_CN.js"></script>
    <!-- <script type="text/javascript" src="js/menu.js"></script> -->
    <script type="text/javascript" src="ScriptFile/easyuiuimaker/echarts-all.js"></script>




    <script type="text/javascript">
        //chart0

        $(document).ready(function () {
            var option0 = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                    show: false
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' }
                        ]
                    }
                ]
            };

            var myChart0 = echarts.init(document.getElementById('chart0'));
            myChart0.setOption(option0);

            //chart1
            var option1 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                    show: false
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '邮件营销',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        stack: '总量',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        stack: '总量',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        stack: '总量',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        stack: '总量',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
            var myChart1 = echarts.init(document.getElementById('chart1'));
            myChart1.setOption(option1);

            var option3 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['蒸发量'],
                    show: false
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['采购组织', '供应商', '新物料', 'uimaker', '信息管理', '业务系统', '采购商']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [60, 45, 73, 23, 37, 48, 18],
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            };

            var myChart3 = echarts.init(document.getElementById('chart3'));
            myChart3.setOption(option3);

            //我的待办点击事件
            $(document).on('click', '.work-item.green', function (event) {
                var width = (2 * $(this).width()) + 10;
                $(".todo-panel").width(width - 2).css({ top: $(this).offset().top, left: $(this).offset().left }).show();
                event.stopPropagation();
            });
            $(".todo-panel").click(function () {
                event.stopPropagation();
            });
            $(document).click(function () {
                $(".todo-panel").hide();
            });
            //邮件查看
            $(document).on('click', '.work-item.yellow', function (event) {
                window.parent.addTab('<%=strYjurl12%>', "收信箱");
        });
    });

        //公开附件tab事件处理
        $(".attached-tab").on("click", "a", function () {
            $(this).closest(".attached-tab").find("a").removeClass("current");
            $(this).addClass("current");
            $(this).closest(".attached").find("ul").addClass("hide");
            $(this).closest(".attached").find("ul." + $(this).attr("attached")).removeClass("hide");
        })

    </script>
</body>
</html>
